import { Component, ViewChild, OnInit, AfterViewInit } from '@angular/core';
import { FormGroup, Validators, FormControl, FormBuilder } from '@angular/forms';
import { RouterModule, Routes, Router } from '@angular/router';
import { LoginPage } from './model/login.model';
import { LoginService } from './service/login.service';
import * as $ from 'jquery';

@Component({
    templateUrl: 'login.component.html',
    styleUrls: ['login.component.scss'],
    providers: [ LoginService ]
})
export class LoginComponent implements OnInit, AfterViewInit {
    public form: FormGroup;
    public username = new FormControl('', Validators.required);
    public password = new FormControl('', Validators.required);

    public processingLogin = false;
    public statusMessage = '';
    public showQrcode: boolean = true;
    public showBgImageDetail: boolean = false;
    public appUrl: string = '';
    public currentBackgroundIndex: number = 0;
    public backgrounds: LoginPage[];
    public currentBackgroundPage = new LoginPage();

    constructor(
        private fb: FormBuilder,
        private router: Router,
        private loginService: LoginService) { };

    public ngOnInit() {
        /**绑定登录表单 */
        this.form = this.fb.group({
            'username': this.username,
            'password': this.password
        });
        /**初始化登录背景界面切换选项 */
        this.loginService.getLoginPage().subscribe(
            data => this.backgrounds = data
        );
        /**初始化二维码图片地址 */
        this.loginService.getQrCode().subscribe(
            data => this.appUrl = data
        );
    }

    public ngAfterViewInit() {
        setTimeout(function () {
            $("#loading-wrapper").remove();
            $("app-root").show();
        }, 2000);
    }

    /** 用户登录 */
    public login() {
        this.processingLogin = true;
        this.statusMessage = "";
        this.loginService.login(this.form.value).subscribe(
            resp => {
                if(resp.ok){
                    this.processingLogin = false;
                    this.statusMessage = '登录成功，请稍候...';
                    //保存token到localsotrage中
                    localStorage.setItem('token', resp['data']['token']);
                    //保存当前登录人信息到全局变量中
                    //currentHumanInfo = resp['data']['humaninfo'];
                    this.router.navigateByUrl("desktop");                    
                }else{
                    this.processingLogin = false;
                    this.statusMessage = resp['message'] || '用户名或密码错误';
                }
            }
        );

    }

    public keypress($event) {
    }

    /** 显示/关闭二维码 */
    public toggleQrCode($event) {
        this.showBgImageDetail && this.toggleBgDetail();
        this.showQrcode ? $(".app-qrcode-area").fadeIn() : $(".app-qrcode-area").fadeOut();
        this.showQrcode = !this.showQrcode;
    }

    /** 切换登录界面背景图片 */
    public changeBgImage(code, $event) {
        this.showBgImageDetail && $(".app-bgimage-detail").css('left', "-450px");
        if (code == 'next') {
            (this.backgrounds.length - 1) != this.currentBackgroundIndex ? this.currentBackgroundIndex++ : this.currentBackgroundIndex = 0;
        } else if (code == 'per') {
            0 != this.currentBackgroundIndex ? this.currentBackgroundIndex-- : this.currentBackgroundIndex = this.backgrounds.length - 1;
        };
        this.currentBackgroundPage = this.backgrounds[this.currentBackgroundIndex];
        let imgUrl = this.currentBackgroundPage.bgImage;
        $(".content-background").fadeOut('normal', function () {
            $(".content-background").css('background-image', 'url("' + imgUrl + '")').fadeIn('normal');
        });
    }
    /** 显示/关闭背景详情界面 */
    public toggleBgDetail() {
        this.showBgImageDetail ? $(".app-bgimage-detail").css('left', "-400px") : $(".app-bgimage-detail").css('left', "0px");
        this.showBgImageDetail = !this.showBgImageDetail;
    }
}

